<template>
    <m-navbar title="公告列表" :isNeedBack="false"/>
    <!-- 无数据 -->
    <template v-if="isNoData">
        <view class="w-full h-page-empty flex-justifyCenter-itemsCenter-box">
            <u-empty
                mode="order"
                width="200"
                text="暂无公告哦~"
                icon="https://cdn.uviewui.com/uview/empty/order.png"
            />
        </view>
    </template>
    <!-- 作业列表 -->
    <template v-else>
        <view class="content-wrap tab-page-height">
            <view class="flex">
                <u-input style="flex:1;" v-model="pageParams.noticeTitle" type="text" placeholder="请输入公告标题" clearable/>
                <u-button class="ml-8" style="height: 37px;" type="primary" @click="getAnnouncementList">搜索</u-button>
            </view>
            <AnnouncementCard :list="announcementList"/>
        </view>
    </template>
    <m-tabbar :activeId="1"/>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from 'vue'
import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
import { httpAnnouncementList } from '@/api/modules/announcement'
import { PageParams } from '@/api/request'
import AnnouncementCard from '@/pages/announcement/component/AnnouncementCard.vue'

// 公告列表
const announcementList = ref([])
// 是否无数据
const isNoData = computed(() => Boolean(!announcementList.value.length))
// 分页数据
const pageParams: PageParams = reactive({
	pageNum: 1,
	pageSize: 10,
    noticeTitle: '',
	status: '0'
})
// 总数据
const total = ref(0)

// 获取公告列表
const getAnnouncementList = () => {
	if (!uni.getStorageSync('isLogin')) {
		return
	}
	httpAnnouncementList(pageParams).then(res => {
		if (res.total) {
			total.value = res.total
			announcementList.value = res.rows.map(item => {
				return {
					...item

				}
			}).filter(item => item.status === '0')
		}
	})
}

onShow(() => {
	getAnnouncementList()
})

// 分享小程序
onShareAppMessage(() => {
	return {
		title: '快来加入家校通小程序吧~',
		path: '/pages/announcement/index'
	}
})
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    view {
        display: flex;
        padding: 10px 0;
        justify-content: center;
        border-radius: 14px;
        margin-bottom: 24px;
        box-sizing: border-box;
        color: #999999;
        box-shadow: 0 3px 10px rgba(0, 0, 0, .07);
        width: calc(50% - 24rpx);
    }
}

.content-wrap {
    .u-border {
        border-radius: 20px !important;
    }

    .u-input {
        padding: 7px 9px;
    }
}
</style>
